<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品详情页</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/compound.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			#bigglass {
				width: 377px;
				float: left;
				position: relative;
			}
			
			#box {
				width: 375px;
				height: 375px;
				position: relative;
			}
			
			#box img {
				width: 100%;
				height: 100%;
			}
			
			#mark {
				width: 187px;
				height: 187px;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.5;
				-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
				filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
				cursor: move;
				display: none;
				background-color: #000;
			}
			/*放大镜显示框*/
			
			#boxRight {
				position: absolute;
				top: 0px;
				left: 490px;
				width: 400px;
				height: 400px;
				border: 1px solid #999999;
				overflow: hidden;
				display: none;
			}
			
			#boxRight img {
				position: absolute;
				top: 0;
				left: 0;
				width: 200%;
				height: 200%;
			}
			
			.product-bimg {
				width: 375px;
				height: 80px;
				margin-top: 2px;
				background-color: white;
			}
			/*底下小图片*/
			
			.product-smimg {
				width: 75px;
				height: 75px;
				position: relative;
				float: left;
			}
			
			.product-smimg img {
				width: 100%;
				height: 100%;
			}
			
			.product-border {
				position: absolute;
				z-index: 10;
				display: none;
				display: inline-block;
				border: 1px solid white;
			}
			/*以下为小图边框的样式*/
			
			.product-bt,
			.product-bb {
				width: 35px;
				left: 20px;
			}
			
			.product-bt {
				top: -1px;
			}
			
			.product-bb {
				bottom: -2px;
			}
			
			.product-bl,
			.product-br {
				height: 35px;
				top: 20px;
			}
			
			.product-bl {
				left: -1px;
			}
			
			.product-br {
				right: -2px;
			}
		</style>
	</head>

	<body>
		<div id="xiangqing_fixmenu">
			<div id="xiangqing_fixmenu_left">
				<ul>
					<li>我的购物车</li>
					<li>我的优惠卷</li>
					<li>我的收藏</li>
					<li>我的足迹</li>
					<li>我要咨询</li>
					<li>我要分享</li>
				</ul>
				<ul>
					<li><img src="img/erweima1122.jpg" / width="100%"></li>
				</ul>
			</div>
			<div id="xiangqing_fixmenu_right">
				<ul>
					<li class="gwc"></li>
					<li class="yhj"></li>
					<li class="sc"></li>
					<li class="zj"></li>
					<li class="zx"></li>
					<li class="fx"></li>
				</ul>
				<ul>
					<li class="app"></li>
					<li class="db"></li>
				</ul>
			</div>
		</div>
		<div id="xiangqing_head">
			<div class="head">
				<!--定位导航-->
				<div id="head-top" class="w">
					<div id="head-top-content" class="h">
						<ul class="head-top-ul1 h">
							<li><i class="iconfont icon-hongjiuchengiconhongjiucheng icon-home"></i>当前城市：</li>
							<li class="head-display-par" id="head-display-a">
								<i class="iconfont icon-dangqianchengshi  icon-down"></i>
								<a href="javascript:;" class="head-a">北京</a>
								<div id="head-display">
									<p class="head-display-city">
										<a href="javascript:;">北京</a>
										<a href="javascript:;">上海</a>
										<a href="javascript:;">天津</a>
										<a href="javascript:;">重庆</a>
									</p>
									<p class="head-display-city">
										<a href="javascript:;">山西</a>
										<a href="javascript:;">河北</a>
										<a href="javascript:;">河南</a>
										<a href="javascript:;">辽宁</a>
									</p>
									<p class="head-display-city">
										<a href="javascript:;">吉林</a>
										<a href="javascript:;">陕西</a>
										<a href="javascript:;">深圳</a>
										<a href="javascript:;">江苏</a>
									</p>
									<p class="head-display-city">
										<a href="javascript:;">山东</a>
										<a href="javascript:;">安徽</a>
										<a href="javascript:;">浙江</a>
										<a href="javascript:;">福建</a>
									</p>
									<p class="head-display-city">
										<a href="javascript:;">湖北</a>
										<a href="javascript:;">湖南</a>
										<a href="javascript:;">广东</a>
										<a href="javascript:;">江西</a>
									</p>
									<p class="head-display-city">
										<a href="javascript:;">海南</a>
										<a href="javascript:;">贵州</a>
										<a href="javascript:;">宁夏</a>

										<a href="javascript:;">黑龙江</a>

									</p>
								</div>
							</li>
							<li>你好，欢迎进入!</li>
							<li>
								<a class="head-a" href="login.html">登录</a>
							</li>
							<li>
								<a class="head-a" href="register.html">注册</a>
							</li>
						</ul>

						<ul class="head-top-ul2 h">
							<li class="head-position-par">
								<a class="head-a" href="javascript:;">我的账户</a><i class="iconfont icon-arrowDown icon-down"></i>
								<div class="head-myself">
									<p class="head-myself-children">
										<a href="order.html">我的订单</a>
									</p>
									<p class="head-myself-children">
										<a href="javascript:;">我的资料</a>
									</p>
									<p class="head-myself-children">
										<a href="javascript:;">我的收藏</a>
									</p>
									<p class="head-myself-children">
										<a href="shopping.html">我的购物车</a>
									</p>
									<p class="head-myself-children">
										<a href="javascript:;">我的关注</a>
									</p>
								</div>
							</li>
							<li><i class="iconfont icon-tubiaoshangcheng icon-down"></i>
								<a class="head-a" href="shopping.html">购物车<span class="head-number">1</span>件</a>
							</li>
							<li>
								<a class="head-a" href="javascript:;">客户服务</a>
							</li>
							<li>
								<a class="head-a" href="javascript:;">大客户</a>
							</li>
						</ul>
					</div>
				</div>

				<!--logo，搜索内容显示位置-->
				<div id="head-content">
					<!--logo-->
					<div class="head-content-left">
						<img src="img/logo.png" />
					</div>
					<!--搜索-->
					<div class="head-content-search">
						<p class="head-p"><i class="iconfont icon-sou icon-search f16"></i><input type="text" class="head-input" /><input type="button" class="head-btn" value="搜索" /></p>
						<div class="head-p2">
							<ul class="head-ul3 h">
								<li>
									<a class="head-a" href="javascript:;">红酒</a>
								</li>
								<li>
									<a class="head-a" href="javascript:;">葡萄酒</a>
								</li>
								<li>
									<a class="head-a" href="javascript:;">奔富</a>
								</li>
								<li>
									<a class="head-a" href="javascript:;">轩尼诗</a>
								</li>
								<li>
									<a class="head-a" href="javascript:;">拉菲</a>
								</li>
							</ul>
						</div>
					</div>
					<!--二维码-->
					<div class="head-content-right"><img src="img/erweima.jpg" /></div>
					<!--产品导航栏-->
					<nav>
						<div class="head-nav-left h f16">全部商品分类</div>
						<div class="head-nav-ul">
							<ul class="w">
								<li>
									<a href="index.html" class="head-a f16">首页</a>
								</li>
								<li>
									<a href="Global-.html" class="head-a f16">名庄甄选</a>
								</li>
								<li>
									<a href="flash-purchase.html" class="head-a f16">限时闪购</a>
								</li>
								<li>
									<a href="jiuzhuangjieshaofenye.html" class="head-a f16">美酒知识</a>
								</li>
								<li>
									<a href="wine.html" class="head-a f16">红洋美酒</a>
								</li>
							</ul>

						</div>
					</nav>
				</div>
				<div class="head-border w"></div>
			</div>
		</div>
		<div id="xiangqing_bg">
			<div id="xiangqing_bg_main">
				<div id="xiangqing_bg_main_submenu">
					<a href="index.html">首页</a>>
					<a href="javascript:;">酒</a>>
					<a href="javascript:;">葡萄酒</a>>
					<a class="winetitle" href="javascript:;"></a>
				</div>
				<div id="xiangqing_bg_main_content">
					<!--放大镜效果-->
					<div id="bigglass">
						<!--显示大图的-->
						<div id="box">
							<img class="bigimg" src="" />
							<!--放大显示的定位框-->
							<div id="mark"></div>
						</div>
						<!--底部图片显示-->
						<div class="product-bimg">
							<div class="product-smimg">
								<img src="" />
								<span class="product-border product-bt"></span>
								<span class="product-border product-bb"></span>
								<span class="product-border product-bl"></span>
								<span class="product-border product-br"></span>

							</div>
							<div class="product-smimg">
								<img src="" />
								<span class="product-border product-bt"></span>
								<span class="product-border product-bb"></span>
								<span class="product-border product-br"></span>
							</div>
							<div class="product-smimg">
								<img src="" />
								<span class="product-border product-bt"></span>
								<span class="product-border product-bb"></span>
								<span class="product-border product-br"></span>
							</div>
							<div class="product-smimg">
								<img src="" />
								<span class="product-border product-bt"></span>
								<span class="product-border product-bb"></span>
								<span class="product-border product-br"></span>

							</div>
							<div class="product-smimg">
								<img src="" />
								<span class="product-border product-bt"></span>
								<span class="product-border product-bb"></span>
								<span class="product-border product-br"></span>
							</div>
						</div>
						<!--局部放大图片显示框-->
						<div id="boxRight">
							<img src="img/1470363139572726_L.jpg" />
						</div>
					</div>
					<!--放大镜效果结束-->
					<div id="xiangqing_bg_main_content_xiangqing">
						<h3 class="f18 fb"></h3>
						<div id="txt">
							<label class="f12 ml20">闪购价：</label><label><em class="em"></em></label>
							<p class="fr"><span></span><span>剩余</span><span class="hh"></span><span>时</span><span class="mm"></span><span>分</span><span class="ss"></span><span>秒</span></p>
						</div>
						<form class="form-inline">
							<div data-toggle="distpicker">
								<span class="fl ml20 f12 mt5">送货至：</span>
								<div class="form-group">
									<label class="sr-only" for="province2"></label>
									<select class="form-control" id="province2" data-province="---- 选择省 ----"></select>
								</div>
								<div class="form-group">
									<label class="sr-only" for="city2"></label>
									<select class="form-control" id="city2" data-city="---- 选择市 ----"></select>
								</div>
								<div class="form-group">
									<label class="sr-only" for="district2"></label>
									<select class="form-control" id="district2" data-district="---- 选择区 ----"></select>
								</div>
							</div>
						</form>
						<div id="gouwuche" class="mt20">
							<div id="shuliangbtn" class="ml20">
								<div id="shuliang" contenteditable="true" class="fl">1</div>
								<div id="btn" class="fl">
									<span onclick="jiajian(1)">+</span>
									<span onclick="jiajian(2)">-</span>
								</div>
								<div id="jiaru" class="fl">
									<span>加入购物车</span><span></span><span>手机购买</span>
								</div>
							</div>
						</div>
						<p style="clear: both;"></p>
						<div id="fuwu" class="mt10">
							<span class="fl ml20 f12 mt10">保障：</span>
							<p class="fl"><span class="sq"></span><span class="f12">品牌授权</span></p>
							<p class="fl"><span class="bz"></span><span class="f12">保真基金</span></p>
							<p class="fl"><span class="sh"></span><span class="f12">售后无忧</span></p>
						</div>
					</div>
				</div>
				<div id="xiangqing_bg_main_caonima">
					<ul id="title">
						<li class="hover">商品详情</li>
						<li>商品参数</li>
						<li>商品评价</li>
						<li>服务保障</li>
					</ul>
					<div id="xiangqing-detailTab0">
					</div>
				</div>
			</div>

		</div>
		<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" class="library" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" class="library" src="js/jquery.colorbox-min.js"></script>
		<script src="js/distpicker.data.js"></script>
		<script src="js/distpicker.js"></script>
		<script src="js/compound.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.2/av-min.js"></script>

		<script type="text/javascript">
			$(function() {
				//云端数据查找
				var APP_ID = 'isetgclNbinuVRR2cWjIAsc2-gzGzoHsz';
				var APP_KEY = 'iB12WgD1FTr8FGQNB0JSsrah';
				AV.init({
					appId: APP_ID,
					appKey: APP_KEY
				});
				var currentUser = AV.User.current();
				//				if(currentUser) {
				//					console.log(currentUser._serverData.username);
				//					console.log("是当前用户");
				//					//$("#name").html(currentUser._serverData.username);
				//					// 跳转到首页
				//				} else {
				//					//currentUser 为空时，可打开用户注册界面…
				//					location.href = "register.html";
				//					//console.log("不是当前用户");
				//				}
				var query = new AV.Query('Product');
				//获取URL
				var idurl = location.search;
				//以ID排序
				query.addAscending('id');
				//截取商品传过来的id
				var productid = idurl.substring((idurl.indexOf("=") + 1));
				var cql = 'select * from Product';
				AV.Query.doCloudQuery(cql).then(function(data) {
					//results即为查询结果，它是一个 AV.Object 数组
					//查询ID等于传进来的ID的商品
					console.log(data);
					for(var i in data.results) {
						var id = data.results[i].attributes.id;
						if(productid == id) {
							$(".fb").html(data.results[i].attributes.title);
							$(".winetitle").html(data.results[i].attributes.title);
							$(".em").html(data.results[i].attributes.price);
							var images = data.results[i].attributes.image.split(";");
							$(".product-smimg img").each(function(j) {
								$(this).attr("src", images[j]);
								$(".bigimg").attr("src", images[0]);

							});
							$("#xiangqing-detailTab0").html(data.results[i].attributes.detail);
						}

					}
				}, function(error) {
					//console.log("查询失败");
					//					GetRequest()
				});
				//云端数据读取结束

				//详情放大镜效果js
				//jquery的点击事件
				$(".product-smimg:first-child").css("border", "1px solid red");
				$(".product-smimg").click(function() {
					$(".product-smimg").css("border", "none");
					$(this).css({
						"border": "1px solid red"
					});
					$("#box img").attr("src", $(this).children(0).attr("src"));
					$("#boxRight img").attr("src", $(this).children(0).attr("src"));
				});
				//获得标签
				var box = document.getElementById('box');
				var mark = document.getElementById('mark');
				var boxRight = document.getElementById('boxRight');
				var img = boxRight.getElementsByTagName('img')[0]; //修改放大镜div的坐标
				function setPosition(e) {
					//计算坐标
					var top = e.clientY - box.offsetTop - mark.offsetHeight / 2;
					var left = e.clientX - box.offsetLeft - mark.offsetWidth / 2;
					//定义坐标的最大值和最小值
					var minLeft = minTop = 0;
					var maxLeft = maxTop = mark.offsetHeight;
					//取得特定范围内的坐标
					top = top < minTop ? minTop : (top > maxTop ? maxTop : top);
					left = left < minLeft ? minLeft : (left > maxLeft ? maxLeft : left);
					//放大范围的坐标
					mark.style.top = top + 'px';
					mark.style.left = left + 'px';
					//放大图片的坐标
					img.style.left = -left * 800 / 375 + 'px';
					img.style.top = -top * 800 / 375 + 'px';
				}
				//鼠标移入后的效果       在鼠标指针移动到图片上时触发      类似onmouseover事件，但是不支持冒泡
				box.onmouseenter = function(e) {
					e = e || window.event;
					mark.style.display = 'block';
					boxRight.style.display = 'block';
					setPosition(e);
				}; //鼠标移动的效果
				box.onmousemove = function(e) {
					e = e || window.event;
					setPosition(e);

				};
				boxRight.onmousemove = function(e) {
					e = e || window.event;
					setPosition(e);

				};
				//鼠标移出的效果
				box.onmouseleave = function(e) {
						e = e || window.event;
						mark.style.display = 'none';
						boxRight.style.display = 'none';
						setPosition(e);
					}
					//详情放大镜效果结束

			});

			$("#xiangqing_fixmenu").css("height", $(window).height())
			$(window).resize(function() { //浏览器改变触发的事件
				$("#xiangqing_fixmenu").css("height", $(window).height())
			})
			$("#xiangqing_fixmenu_right li").hover(function() {
				$($("#xiangqing_fixmenu_left li")[$("#xiangqing_fixmenu_right li").index($(this))]).css("visibility", "visible");
			}, function() {
				$($("#xiangqing_fixmenu_left li")[$("#xiangqing_fixmenu_right li").index($(this))]).css("visibility", "hidden")
			});
			$("#xiangqing_fixmenu_right ul:last-child li:last-child").click(function() {
				$('html, body').animate({
					scrollTop: 0
				}, 'slow');
			})
			$("#xiangqing_fixmenu_left li").hover(function() {
					$(this).css("visibility", "visible");
				}, function() {
					$(this).css("visibility", "hidden");
				})
				//右侧menu功能
			function daojishi() {
				var time = new Date();
				var hh = time.getHours();
				var mm = time.getMinutes();
				var ss = time.getSeconds();
				$(".hh").html(((33 - hh) > 23 ? 33 - hh - 24 : 33 - hh) < 10 ? "0" + ((33 - hh) > 23 ? 33 - hh - 24 : 33 - hh) : ((33 - hh) > 23 ? 33 - hh - 24 : 33 - hh));
				$(".mm").html((59 - mm) < 10 ? "0" + (59 - mm) : (59 - mm));
				$(".ss").html((59 - ss) < 10 ? "0" + (59 - ss) : (59 - ss));
			}
			daojishi();
			setInterval(function() {
				daojishi()
			}, 1000);

			function jiajian(t) {
				var $shuliang = $("#shuliang").html();
				switch(t) {
					case 1:
						$shuliang < 999 ? $shuliang++ : $shuliang = 999;
						break;
					case 2:
						$shuliang > 1 ? $shuliang-- : $shuliang = 1;
						break;
				}
				$("#shuliang").html($shuliang)
			}
		</script>

	</body>

</html>